<!--  -->
<template>
    <div class="com-container">
        <div class="com-chart" ref="RefsStock"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import { getDataJson } from '@/api/index.js';
export default {
    components: {},
    computed: {
        ...mapState(['theme']),
    },
    props: {},
    watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
    data() {
        return {
            chartInstance: null,
            allDataList: [],
            currentIndex: 0,
            timerID:null,
        }
    },
    created(){
        this.$WebSocket.registerCallBack('stockData',this.getData)
    },
    mounted() {
        this.initChart();
        // this.getData(); 取消这一步
        // 通过socket通信,来传递需要获取的数据
        this.$WebSocket.send({
            action:'getData',
            socketType:'stockData',
            chartName:'stock',
            value:""
        })
        window.addEventListener('resize', this.screenAdapter);
        //在页面加载完成时，主动调用一下
        this.screenAdapter()
    },
    destroyed() {
        this.handleClearInterval()
        window.removeEventListener('resize', this.screenAdapter);
        this.$WebSocket.unRegisterCallBack('stockData')
    },
    methods: {
        //初始化
        async initChart() {
            const _this = this;
            this.chartInstance = this.$Echarts.init(this.$refs.RefsStock, this.theme);
            const initOptions = {
                title: {
                    text: '| 库存与销量分析',
                    top: 20,
                    left: 20
                },


            }
            this.chartInstance.setOption(initOptions)
            //对图表对象，进行鼠标事件进行监听
            this.chartInstance.on('mouseover',(arg)=>{
                //鼠标移入事件
                console.log(`鼠标移入事件`);
                console.log(`arg`,arg);
                this.handleClearInterval()
            });
            this.chartInstance.on('mouseout',(arg)=>{
                //鼠标移出事件
                console.log(`鼠标移出事件`);
                this.startInterVal()
            });
        },
        //获取数据
        async getData(data) {
            try {
                // this.allDataList = await getDataJson('stock');//
                this.allDataList = data;//
                this.updateChart()
                this.startInterVal()
            } catch (error) {
                console.log(error)
            }
        },
        //更新视图，处理数据
        updateChart() {
            const _this = this;
            const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%']
            ]
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF']
            ]
            const start = this.currentIndex * 5
            const end = (this.currentIndex + 1) * 5
            const showData = this.allDataList.slice(start, end)
            const seriesArr = showData.map((item, index) => {
                return {
                    type: 'pie',
                    // radius: [110, 100],//通过设置内圆、外圆半径 形成 圆环
                    center: centerArr[index],//中心点
                    hoverAnimation: false,//关闭鼠标移入到饼图是的动画效果
                    labelLine: {
                        show: false,//隐藏指示线
                    },
                    label: {
                        position: 'center',
                        color: colorArr[index][0],
                        textStyle: {
                            fontSize: `66px`
                        }
                    },
                    data: [
                        {
                            name: `${item.name} \n ${item.sales}`,
                            value: item.sales,
                            itemStyle: {
                                color: new _this.$Echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: colorArr[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[index][1]
                                    }
                                ])
                            }
                        },
                        {
                            value: item.stock,
                            itemStyle: {
                                color: '#333843'
                            }
                        }
                    ]
                }
            })
            const dataOptions = {
                series: seriesArr
            }
            this.chartInstance.setOption(dataOptions)
        },

        // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
        screenAdapter() {
            this.$nextTick(() => {
                const titleFontSize = this.$refs.RefsStock.offsetWidth / 100 * 3.6;
                const innerRadius = titleFontSize * 2;
                const outterRadis = innerRadius * 1.125;

                //分辨率大小的相关配置项
                const adapterOptions = {
                    title: {
                        textStyle: { //主标题 文字样式设置
                            fontSize: titleFontSize,
                        },
                    },
                    series:[
                        {
                            type:'pie',
                            radius:[outterRadis,innerRadius],
                            label:{
                                fontSize:titleFontSize / 2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadis,innerRadius],
                            label:{
                                fontSize:titleFontSize / 2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadis,innerRadius],
                            label:{
                                fontSize:titleFontSize / 2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadis,innerRadius],
                            label:{
                                fontSize:titleFontSize / 2
                            }
                        },
                        {
                            type:'pie',
                            radius:[outterRadis,innerRadius],
                            label:{
                                fontSize:titleFontSize / 2
                            }
                        }
                    ]

                }
                this.chartInstance.setOption(adapterOptions);
                //重新计算和绘制图表
                this.chartInstance.resize()
            })
        },
        //定义一个定时器的方法
        startInterVal() {
            const _this = this;
            this.handleClearInterval();//事先干掉定时器
            this.timerID = setInterval(() => {
                console.log(_this.currentIndex)
                _this.currentIndex ++
                if(_this.currentIndex > 1){
                    _this.currentIndex = 0
                }
                _this.updateChart()
            }, 5000)
        },
        //干掉定时器
        handleClearInterval() {
            //干掉定时器
            clearInterval(this.timerID)
        },
    }
}
</script>
<style lang='scss' scoped></style>